<template>
    <div class="C_two" id="C_two">

    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    name: '',
    data() {
        return {
        }
    },
    mounted() {
        this.initEcharts()
    },
    methods: {
        initEcharts() {
            const myChart = echarts.init(document.getElementById('C_two'))
            var option = {
                // 背景色
                // backgroundColor: '#0c2b7a',
                // 提示框
                tooltip: {
                    trigger: 'item',

                },
                legend: {
                    data: ['理想曲线1', '理想曲线2', '理想曲线3'],
                    textStyle: {
                        color: '#fff', // 图例文字颜色（如果背景深，可设为白色）
                    },
                    icon: 'rect',
                    itemWidth: 30,
                    // 设置图标高度
                    itemHeight: 5,

                },
                // 网格
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                // X轴
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['支架1', '支架2', '支架3', '支架4', '支架5', '支架6', '支架7', '支架8', '支架9', '支架10'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false // 设置为false隐藏刻度线
                    },
                    axisLabel: {
                        color: '#D8D8D9'
                    }
                },
                // Y轴
                yAxis: {
                    type: 'value',
                    interval: 20,
                    min: -40,
                    max: 80,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#FFFFFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    }

                },
                // 系列（多折线）
                series: [
                    {
                        name: '理想曲线1',
                        type: 'line',
                        data: [80, 35, 20, 35, 40, 30, 20, 15, 15, 80],
                        lineStyle: {
                            color: '#165DFF'
                        },
                        itemStyle: {
                            color: '#4895ff'
                        },

                        smooth: true, // 平滑曲线
                        symbol: 'none',  // 设置拐点符号为无（不显示）
                    },

                    {
                        name: '理想曲线2',
                        type: 'line',
                        data: [20, -25, -20, -15, 0, -10, -20, -25, -25, 20],

                        lineStyle: {
                            color: '#E10181'
                        },
                        itemStyle: {
                            color: '#66ff99'
                        },
                        smooth: true, // 平滑曲线
                        symbol: 'none',  // 设置拐点符号为无（不显示）
                    },
                    {
                        name: '理想曲线3',
                        type: 'line',
                        data: [-40, 15, 10, 15, 10, 30, -15, -10, -5, 80],

                        lineStyle: {
                            color: '#00B42A'
                        },
                        itemStyle: {
                            color: '#ff6699'
                        },
                        smooth: true, // 平滑曲线
                        symbol: 'none',  // 设置拐点符号为无（不显示）
                    },

                ]
            };
            myChart.setOption(option)
        }
    },
}
</script>
<style lang="less" scoped>
.C_two {
    width: 100%;
    height: 100%;
}
</style>
